<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件管理系统</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css">
    <script src="/plugins/layui/layui.js"></script>
</head>
<body>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md12">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>选完文件后不自动上传</legend>
            </fieldset>
            <div class="layui-upload">
                <button type="button" class="layui-btn layui-btn-normal" id="selectFile1">选择文件</button>
                <button type="button" class="layui-btn" id="uploadFile1">开始上传</button>
            </div>
        </div>
    </div>

    <div class="layui-row" style="margin-top: 25px;">
        <div class="layui-col-md12">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>高级应用：制作一个多文件列表</legend>
            </fieldset>
            <div class="layui-upload">
                <button type="button" class="layui-btn layui-btn-normal" id="selectFileList">选择多文件</button>
                <div class="layui-upload-list">
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th>文件名</th>
                            <th>大小</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="demoList"></tbody>
                    </table>
                </div>
                <button type="button" class="layui-btn" id="uploadFileListAction">开始上传</button>
            </div>
        </div>
    </div>




    <div class="layui-row" style="margin-top: 25px;">
        <div class="layui-col-md12">
            <!--<div class="layui-btn-group demoTable">-->
                <!--<button class="layui-btn" data-type="deleteSelectData">删除所选数据</button>-->
            <!--</div>-->
            <table id="fileList" lay-filter="fileList"></table>
            <script type="text/html" id="fileListBar">
                <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" style="color: #ffffff;" lay-event="del">删除</a>
            </script>
        </div>
    </div>
</div>


<script>
    layui.use(['table','upload'], function(){
        var table = layui.table
        ,upload = layui.upload;


        table.render({
            elem: '#fileList'
            ,request: {
                pageName: 'pageNum' //页码的参数名称，默认：page
                ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            ,limit: 20
            ,response: {
                statusName: 'errorNo' // 规定数据状态的字段名称，默认：code
                ,statusCode: 0 // 规定成功的状态码，默认：0
                ,msgName: 'errorInfo' //规定状态信息的字段名称，默认：msg
                ,countName: 'total' //规定数据总数的字段名称，默认：count
                ,dataName: 'data' //规定数据列表的字段名称，默认：data
            }
            ,height: 600
            ,url: '/file/files' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {type:'numbers'}
                ,{type: 'checkbox'}
                ,{field: 'name', title: '文件名'}
                ,{field: 'size', title: '文件大小',sort: true}
                ,{field: 'uploadDate', title: '上传时间',sort: true}
                ,{ title: '操作',width:200, toolbar: '#fileListBar'}
            ]]
        });
        //监听工具条
        table.on('tool(fileList)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                console.log(data);
                layer.confirm('确定要删除图片吗？', function(index){
                    $.ajax({
                        url:"/file/files/" + data.id,
                        method:'delete',
                        dataType:'json',
                        success:function(data){
                            if(data.errorNo == 0){
                                // obj.del();
                                layer.close(index);
                                obj.del();
                                layer.msg('删除成功', {icon: 6});
                                // setTimeout(function (args) {
                                //     table.reload('fileList', {
                                //         url: '/file/files'
                                //     });
                                // },1000);
                            }else{
                                layer.close(index);
                                layer.msg(data.errorInfo,{icon: 5});
                            }
                        },
                        error: function(data) {
                            layer.close(index);
                            layer.msg("服务器错误",{icon: 5});
                        }
                    });

                });
            } else if (obj.event === 'detail') {
                window.open("/file/files/view/" + data.id);
            }
        });


        // 上传文件
        //选完文件后不自动上传
        upload.render({
            elem: '#selectFile1'
            ,method:'post'
            ,url: '/file/files'
            ,size: 1024*6 //限制文件大小，单位 KB
            ,auto: false
            ,bindAction: '#uploadFile1'
            ,done: function(res){
                console.log(res);
                if(res.errorNo == 0){
                    layer.msg('上传成功', {icon: 6});
                    setTimeout(function (args) {
                        table.reload('fileList', {
                            url: '/file/files'
                        });
                    },1000);
                }else{
                    layer.msg(res.errorInfo,{icon: 5});
                }
            }

        });


        // 多文件上传
        //多文件列表示例
        var $ = layui.$
            ,demoListView = $('#demoList')
            ,uploadListIns = upload.render({
            elem: '#selectFileList'
            ,url: '/file/files'
            ,accept: 'file'
            ,multiple: true
            ,auto: false
            ,size: 1024*6
            ,bindAction: '#uploadFileListAction'
            ,choose: function(obj){
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function(index, file, result){
                    var tr = $(['<tr id="upload-'+ index +'">'
                        ,'<td>'+ file.name +'</td>'
                        ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
                        ,'<td>等待上传</td>'
                        ,'<td>'
                        ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                        ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                        ,'</td>'
                        ,'</tr>'].join(''));

                    //单个重传
                    tr.find('.demo-reload').on('click', function(){
                        obj.upload(index, file);
                    });

                    //删除
                    tr.find('.demo-delete').on('click', function(){
                        delete files[index]; //删除对应的文件
                        tr.remove();
                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                    });

                    demoListView.append(tr);
                });
            }
            ,done: function(res, index, upload){
                if(res.errorNo == 0){ //上传成功
                    var tr = demoListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                    tds.eq(3).html(''); //清空操作
                    return delete this.files[index]; //删除文件队列已经上传成功的文件
                }
                this.error(index, upload);
            }
            ,error: function(index, upload){
                var tr = demoListView.find('tr#upload-'+ index)
                    ,tds = tr.children();
                tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });


        var $ = layui.$, active = {
            deleteSelectData: function(){ //获取选中数据
                var checkStatus = table.checkStatus('fileList')
                    ,data = checkStatus.data;
                console.log(data);
            }
        };
        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });
</script>
</body>
</html>